/******************** 变量 ********************/
$lv-progress-color-white: $color-white !default;
$lv-progress-color-grey: #b2b0bd !default;

$lv-progress-bg-color: $progress-background !default;
$lv-progress-handle-bg-color: $primary-color !default;
$lv-progress-handle-success-bg-color: $status-color-success !default;
$lv-progress-handle-error-bg-color: $status-color-error !default;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-progress {
  display: inline-block;
  line-height: 1;
  font-size: $font-size-base;
  font-family: $font-family;
  color: $text-color;
  white-space: normal;

  &.lv-progress-line {
    width: 100%;
    > div {
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;

      > .lv-progress-wraper {
        flex: 1 1 auto;
        position: relative;
        min-width: 0.08rem;
        .lv-progress-bg {
          position: relative;
          border-radius: $border-radius-md;
          background: $lv-progress-bg-color;
          overflow: hidden;
        }
        .lv-progress-handle {
          height: 0.04rem;
          border-radius: $border-radius-md;
          background: $lv-progress-handle-bg-color;
          overflow: hidden;
          transition: all 600ms cubic-bezier(0.05, 0.46, 0.16, 0.95);
        }
        .lv-progress-handle-min {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 0.01rem;
          border-radius: $border-radius-md;
          background: $lv-progress-handle-bg-color;
        }
      }
      > .lv-progress-label {
        flex: 0 0 auto;
        min-width: 0.36rem;
        margin-left: $margin-sm;
        color: $text-color;
        > .lv-progress-label-text {
          display: flex;
          font-size: $font-size-base;
          line-height: $line-height-base;
          white-space: nowrap;
          > em {
            font-style: normal;
          }
        }
        > .lv-progress-success-icon {
          display: flex;
          i {
            color: $lv-progress-handle-success-bg-color;
          }
        }
        > .lv-progress-error-icon {
          display: flex;
          i {
            color: $lv-progress-handle-error-bg-color;
          }
        }
      }
    }
  }

  &.lv-progress-circle {
    > div {
      position: relative;

      > .lv-progress-wraper {
        width: 100%;
        .lv-progress-circle-bg {
          stroke: $lv-progress-bg-color;
          stroke-dashoffset: 0;
          transition: stroke-dashoffset 300ms ease 0s, stroke-dasharray 300ms ease 0s, stroke 300ms;
        }
        .lv-progress-circle-handle {
          stroke: $lv-progress-handle-bg-color;
          stroke-dashoffset: 0;
          transition: stroke-dashoffset 300ms ease 0s, stroke-dasharray 300ms ease 0s, stroke 300ms,
            stroke-width 600ms cubic-bezier(0.05, 0.46, 0.16, 0.95);
        }
      }
      > .lv-progress-label {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        > .lv-progress-label-text {
          font-size: 0.32rem;
          line-height: 1;
          white-space: nowrap;
          color: $text-color;
          > em {
            font-style: normal;
            font-size: $font-size-lg;
            color: $lv-progress-color-grey;
          }
        }
        > .lv-progress-success-icon,
        > .lv-progress-error-icon {
          display: flex;
          i {
            width: 0.32rem;
            height: $height-base;
            color: $lv-progress-handle-success-bg-color;
          }
        }
        > .lv-progress-error-icon {
          i {
            color: $lv-progress-handle-error-bg-color;
          }
        }
      }
    }
  }

  &.lv-progress-dashed {
    width: 100%;

    > div {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      > .lv-progress-wraper {
        flex: 1 1 auto;
        position: relative;
        min-width: 0.08rem;
        > svg {
          path {
            transform: translate(0, 50%);
          }
        }

        .lv-progress-dashed-bg {
          stroke: $lv-progress-bg-color;
          stroke-dashoffset: 0;
          transition: all 600ms cubic-bezier(0.05, 0.46, 0.16, 0.95);
        }
        .lv-progress-dashed-handle {
          stroke: $lv-progress-handle-bg-color;
          stroke-dashoffset: 0;
          transition: all 600ms cubic-bezier(0.05, 0.46, 0.16, 0.95);
        }
      }
      > .lv-progress-label {
        flex: 0 0 auto;
        min-width: 0.36rem;
        margin-left: $margin-sm;
        color: $text-color;

        > .lv-progress-label-text {
          display: flex;
          font-size: $font-size-base;
          line-height: $line-height-base;
          white-space: nowrap;

          > em {
            font-style: normal;
          }
        }
        > .lv-progress-success-icon {
          display: flex;

          i {
            color: $lv-progress-handle-success-bg-color;
          }
        }
        > .lv-progress-error-icon {
          display: flex;

          i {
            color: $lv-progress-handle-error-bg-color;
          }
        }
      }
    }
  }

  &.lv-progress-error {
    > div {
      > .lv-progress-wraper {
        > .lv-progress-bg {
          > .lv-progress-handle,
          > .lv-progress-handle-min {
            background: $lv-progress-handle-error-bg-color;
          }
        }
        .lv-progress-circle-handle,
        .lv-progress-dashed-handle {
          stroke: $lv-progress-handle-error-bg-color;
        }
      }
    }
  }

  &.lv-progress-success {
    > div {
      > .lv-progress-wraper {
        > .lv-progress-bg {
          > .lv-progress-handle,
          > .lv-progress-handle-min {
            background: $lv-progress-handle-success-bg-color;
          }
        }
        .lv-progress-circle-handle,
        .lv-progress-dashed-handle {
          stroke: $lv-progress-handle-success-bg-color;
        }
      }
    }
  }
}

.lv-progress-top-label {
  &.lv-progress-line,
  &.lv-progress-dashed {
    > div {
      flex-direction: column-reverse;
      align-items: normal;
      > .lv-progress-label {
        margin-left: 0;
      }
    }
  }
}

// 小尺寸
.lv-progress-small {
  &.lv-progress-line {
    > div {
      > .lv-progress-wraper {
        .lv-progress-handle {
          height: 0.04rem;
          border-radius: $border-radius-md;
        }
      }
      > .lv-progress-label {
        margin-left: $margin-sm;
        > .lv-progress-success-icon,
        > .lv-progress-error-icon {
          i {
            width: 0.14rem;
            height: 0.14rem;
          }
        }
      }
    }
  }

  &.lv-progress-circle {
    width: 1.2rem;
    > div {
      > .lv-progress-label {
        > .lv-progress-label-text {
          font-size: 0.24rem;
          > em {
            font-size: $font-size-sm;
          }
        }
        > .lv-progress-success-icon,
        > .lv-progress-error-icon {
          i {
            width: 0.24rem;
            height: $height-sm;
          }
        }
      }
    }
  }

  &.lv-progress-dashed {
    > div {
      > .lv-progress-label {
        margin-left: $margin-sm;
        > .lv-progress-success-icon,
        > .lv-progress-error-icon {
          i {
            width: 0.14rem;
            height: 0.14rem;
          }
        }
      }
    }
  }
}

// 内置文本
.lv-progress-innerlabel {
  &.lv-progress-line {
    > div {
      > .lv-progress-wraper {
        .lv-progress-bg {
          position: relative;
          height: 0.16rem;
          border-radius: 0.16rem;
          overflow: hidden;
          > .lv-progress-label {
            padding: 0 $padding-sm;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
            line-height: 0.16rem;
            color: $lv-progress-color-grey;
          }
        }
        .lv-progress-handle {
          position: relative;
          z-index: 1;
          height: 0.16rem;
          border-radius: 0.16rem;
          overflow: hidden;
          > .lv-progress-label {
            padding: 0 $padding-sm;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            color: $lv-progress-color-white;
            line-height: 0.16rem;
            min-width: 0.36rem;
            text-align: right;
          }
        }
      }
    }
  }

  &.lv-progress-dashed {
    > div {
      > .lv-progress-wraper {
        position: relative;

        .lv-progress-bg,
        .lv-progress-handle {
          position: absolute;
          top: 0;
          left: 0;
          height: 0.16rem;

          .lv-progress-label {
            display: block;
            min-width: 0.3rem;
            padding: 0 $padding-sm;
            line-height: 0.16rem;
            text-align: right;
          }
        }
        .lv-progress-handle {
          overflow: hidden;
        }
        .lv-progress-bg .lv-progress-label {
          color: $lv-progress-color-grey;
        }

        .lv-progress-handle .lv-progress-label {
          color: $lv-progress-color-white;
        }
      }
    }
  }
}
